Expand description
Vertigo is a library for building reactive web components.
It mainly consists of three parts:
- Reactive dependencies - A graph of values and clients (micro-subscriptions) that can automatically compute what to refresh after one or more change(s)
- Real DOM operations - No intermediate Virtual DOM mechanism is necessary
- HTML/CSS macros - Allows to construct Real DOM nodes using HTML and CSS
Example 1
use vertigo::{dom, DomElement, Value, bind, start_app};
pub fn render(count: Value<i32>) -> DomElement {
let increment = bind!(count, || {
count.change(|value| {
*value += 1;
});
});
let decrement = bind!(count, || {
count.change(|value| {
*value -= 1;
});
});
dom! {
<div>
<p>"Counter: " { count }</p>
<button on_click={decrement}>"-"</button>
<button on_click={increment}>"+"</button>
</div>
}
}
#[no_mangle]
pub fn start_application() {
start_app(|| -> DomElement {
let count = Value::new(0);
render(count)
});
}Example 2
use vertigo::{DomElement, Value, dom, css_fn};
pub struct MyMessage {
pub message: Value<String>,
}
impl MyMessage {
pub fn mount(self) -> DomElement {
dom! {
<p>
"Message to the world: "
{ self.message }
</p>
}
}
}
css_fn! { main_div, "
color: darkblue;
" }
fn render() -> DomElement {
let message = Value::new("Hello world!".to_string());
dom! {
<div css={main_div()}>
<MyMessage message={message} />
</div>
}
}To get started you may consider looking at the Tutorial.
Re-exports
pub use log;Modules
Methods for debugging or testing vertigo components by recreating HTML-like string from dom commands
Macros
Allows to create an event handler based on provided arguments
Allows to create an event handler based on provided arguments which is wrapped in Rc
Allows to create an event handler based on provided arguments which launches an asynchronous action
Allows to create Css styles for virtual DOM.
Constructs a CSS block that can be manually pushed into existing Css styles instance.
Allows to define a Css styles factory function for virtual DOM.
Allows to define a Css styles factory function for virtual DOM
based on existing function but with added new rules.
Allows to create DomElement using HTML tags.
Version of
dom! macro that additionally emits compiler warning with generated code.Structs
A structure similar to HashMap
but allows to provide a function
create for creating a new value if particular key doesn’t exists.A reactive value that is read-only and computed by dependency graph.
CSS styles definition for Virtual DOM.
A graph of values and clients that can automatically compute what to refresh after one value change.
A Real DOM representative - comment kind
A Real DOM representative - element kind
A Real DOM representative - text kind
Main connection to vertigo facilities - dependencies and rendering client (the browser).
A struct used by driver to tidy things up on javascript side after a rust object goes out of scope.
Builder for simple requests.
Monotonically non-decreasing clock using a driver, similar to std::time::Instant.
Structure passed as a parameter to callback on on_key_down event.
A structure similar to Value but supports Loading/Error states and automatic refresh
after defined amount of time.
Result from request made using RequestBuilder.
A reactive value. Basic building block of app state.
Represents websocket connection.
Enums
Css chunk, represented either as static or dynamic string.
A Real DOM representative
DomNode not connected yet to any parent
Builder for typed requests (more complex version of FetchBuilder).
The state of the resource.
Websocket message type on which a websocket handler operates.
Traits
Ensures that vector of objects of this type is serializable and deserializable so can be used for defining a resource.
Ensures that this type is serializable and deserializable so can be used for defining a resource.
Functions
Getter for Driver singleton.
Starting point of the app.
Do bunch of operations without triggering anything in between.
Type Definitions
Result from request made using FetchBuilder.
Duration in seconds, returned from Instant methods.